
export default class History {
    constructor(router){
        this.router = router
         // 有一个数据来保存路径的变化
        // 当前没有匹配到记录

        this.current =createRoute(null,{path:'/'})
    }
    transitionTo(path,cb){
        // console.log(path,cb)
        let record =  this.router.match(path)// 匹配到后
        
        
        let route  = createRoute(record,{path}) //路径上所有匹配到的组件放到match数组里面

        //    如果两次路由一直，不要跳转了 
     if (path ===  this.current.path && route.matched.length === this.current.matched.length) {
         return
     }
     // 路径变化 需要渲染组件  响应式原理 
     // 我们需要将currrent属性变成响应式的，这样后续更改current 就可以渲染组件了
     // Vue.util.defineReactive() === defineReactive
     
     // 我可以在router-view组件中使用current属性，如果路径变化就可以更新router-view了
     this.current =route //不光要改变current，还有改变_route
     this.cb&&this.cb(route); 
       cb&&cb();
    }
    listen(cb){
        this.cb = cb
    }
}

function createRoute(record,location) {
    const matched =[]; //匹配
    while(record){
        matched.unshift(record);
        record = record.parent;
    }
    return {
        ...location,
        matched
    }
}